import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { FormattedMessage } from 'umi/locale';
import { ChartCard } from '@/components/Charts';
import numeral from 'numeral';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};
@connect(({ chart, loading }) => ({
  chart,
  loading: loading.effects['chart/fetch'],
}))
class IntroduceRow extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'chart/fetch',
      });
    });
  }

  render() {
    const { chart, loading } = this.props;
    const { allData } = chart;
    return (
      <Row gutter={24}>
        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            title={<FormattedMessage id="app.analysis.total-sales" defaultMessage="Total Sales" />}
            loading={loading}
            total={allData ? `￥${allData.allPrice / 100}` : 0}
            contentHeight={46}
          />
        </Col>
        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            loading={loading}
            title={
              <FormattedMessage id="app.analysis.total-allNewPrice" defaultMessage="Payments" />
            }
            total={allData ? `￥${allData.allNewPrice / 100}` : 0}
          />
        </Col>
        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            loading={loading}
            title={<FormattedMessage id="app.analysis.alluser" defaultMessage="alluser" />}
            total={allData ? numeral(allData.alluser).format('0,0') : 0}
          />
        </Col>
        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            loading={loading}
            title={<FormattedMessage id="app.analysis.total-allNewUsers" />}
            total={allData ? numeral(allData.allNewUsers).format('0,0') : 0}
          />
        </Col>
        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            loading={loading}
            title={<FormattedMessage id="app.analysis.payments" defaultMessage="Payments" />}
            total={allData ? numeral(allData.amount).format('0,0') : 0}
          />
        </Col>
        <Col {...topColResponsiveProps}>
          <ChartCard
            loading={loading}
            bordered={false}
            title={
              <FormattedMessage
                id="app.analysis.operational-effect"
                defaultMessage="Operational Effect"
              />
            }
            total={allData ? numeral(allData.newAmount).format('0,0') : 0}
          />
        </Col>
      </Row>
    );
  }
}
export default IntroduceRow;
